<template>
	<view>
        <u-popup :show="show" mode="bottom"  @close="closeShow" :round="10">
			<div>
				<div class="popup-con">
					<div class="popupTitle">上传文件</div>
					<div>
						<u-upload v-if="fileList1.length < 3"
								:previewImage="false"
								:accept="accept"
								@afterRead="afterRead"
								name="1"
								:maxCount="1">
							    <div class="upload-div">
									<img src="https://pic.moresu.com/Fv3JYWlTCGu62LqaA_kytEX0SDa8" style="width:56rpx;height:38rpx;display: inline-block;margin-top:60rpx;"/>
									<div style="font-size: 28rpx;color: #1E1E1E;text-align: center;">最多上传3项文件</div>
								</div>
							</u-upload>
					</div>
					<div class="fileList">
						<div v-for="(item,index) in fileList1" :key="item" class="file-item">
							<div @click="deletePic(index)" class="icon-div">
								<u-icon name="file-text"></u-icon>
							</div>
							
						    <div class="name">{{item}}</div>
							<div @click="deletePic(index)" class="icon-div">
								<u-icon name="close-circle-fill"></u-icon>
							</div>
							
						</div>
					</div>
				</div>
				
				<div class="u-flex popup-bottom" style="z-index: 5;">
					<u-button text="取消"  shape="circle" @click="closeShow"></u-button>
					<u-button text="确认"  shape="circle" type="warning" @click="finish" ></u-button>
				</div>
				
			</div>
            
        </u-popup>
	</view>
</template>
<script>

import{uploadFilePromise} from '@/plugins/upload/upload.js'
import {addInquiry} from '@/config/api.js'
import store from '@/store';
const log = require('@/plugins/log.js')

export default {
    name: 'uploadFile',
    computed: {
    	
		
    },
	data() {
		return {
           show:false,
		   fileList1: [],
		   btnLoading:false, 
		   // #ifdef MP-WEIXIN
		   accept:'all',
		  // #endif
		  // #ifdef H5 || APP-PLUS
		   accept:'image',
		  // #endif
		   
		}
	},
    watch:{

    },
	created() {
		
	
	},
	methods: {
		// 删除文件
		deletePic(index) {
			this.fileList1.splice(index, 1)
		},
		 // 上传文件
		 afterRead(event) {
			uni.showLoading({
				title: '上传中',
			});
			uploadFilePromise(event.file.url).then((res)=>{
				console.log(res)
				if(res != ''){
					this.fileList1.push(res)
				}
				uni.hideLoading()
			}).catch(()=>{
				uni.hideLoading()
			})
		},
		init(item){
			this.show = true;
			this.fileList1 = [];
		},
		
       finish(){
       	if(this.fileList1.length == 0){
       		uni.showToast({
       		  title: '请选择文件',
       		  icon: 'none'
       		});
       		return false
       	}
       	uni.showLoading({
       		title: '上传中',
       	});
       	
       	addInquiry({inquiryType:'pic',picFiles:this.fileList1.join(",")}).then((res)=>{
       		uni.hideLoading()
       		let text = '智能询价&文件上传&' + this.fileList1.join(",")
       		log.info(text)
			// #ifdef MP-WEIXIN
       		wx.requestSubscribeMessage({
       		  tmplIds: ['X6m-lruMVe4rf8tMEbcv-nxEeLSWbV9b6TX193jeeKE','R7bgDnCd2c3RcHZvAGVNWmJgmI-AxwL-aUqcGsIpkL4','WF5ac-NgWgW_qSYWsq7hRALuGZtmmvYf9jFsG4w61CA'],
       		  success (res) {
       					
       				},
       				fail(res){
       					// console.log("res",res)
       				},
       				complete(){
       					// console.log("89646456")
       				}
       		})
			// #endif
       		this.$emit('showResult',res)
       		this.closeShow()
       	}) 
       	
       },
	   closeShow(){
		   this.show = false
	   }
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.popupTitle{
	font-size:$b-font;
	font-weight: bold;
	text-align: center;
	line-height: 50px;
}
   .popup-con{
    	padding:0 16px 16px 16px;
    	.popup-block-pay{
    		text-align: center;
    		padding:20px;
    		.price-sub-title{
    			font-size:$s-font;
    			color:$g-font-color;
    			line-height: 30px;
    		}
    		.price-big-title{
    			font-size: 22px;
    			color:$theme-color;
    			font-weight:bold;
    			margin-top:10px;
    		}
    	}
    	.popup-label{
    		line-height: 40px;
    		font-size:$m-font;
    		color:$g-font-color;
    		@include flexbox(space-between,center)
    	}
    	.img-div{
    		width:210px;
    		height:210px;
    		border:1px solid $border-color;
    		margin:0 auto;
    		background: #f4f5f7;
    	}
        .send-list{
    		padding-top:$marginSpace;
    		.send-item{
    			border-radius: 8px;
    			padding:12px;
    			box-shadow: 0 0 5px rgba(0,0,0,0.1);
    			margin-bottom:$marginSpace;
    			.send-top{
    				@include flexbox(flex-start,flex-start);
    				font-size:$m-font;
    				.name{
    					padding-right:12px;
    					flex:1
    				}
    				.num{
    					font-weight: bold;
    					color:$theme-color
    				}
    			}
    			.send-middle{
    				font-size:$s-font;
    				color:$g-font-color;
    				line-height: 18px;
    				margin-top:5px;
    			}
    			.send-bottom{
    				text-align: right;
    				font-size:$s-font;
    				margin-top:16px
    			}
    		}
    	}
    	.category-list{
    		padding:36rpx 0;
    		.list-item{
    			@include flexbox(flex-start,flex-start);
    			margin-bottom:20rpx;
    			.item-title{
    				width: 126rpx;
    				height: 52rpx;
    				background: rgba(255,255,255,0.39);
    				border: 1px solid #B8B8B8;
    				border-radius: 9rpx;
    				font-size:$m-font;
    				text-align: center;
    				line-height: 52rpx;
    			}
    			.item-list{
    				padding-left:30rpx;
    				width:calc(100% - 126rpx);
    				overflow: hidden;
    				.item-ename{
    					font-size:$s-font;
    					color: #929292;
    					line-height: 52rpx;
    					width: 170rpx;
    					@include textoverflow(1);
    					float:left;
    				}
    			}
    		}
    	}
    	.goodsSn-list{
    		border: 1px solid #DEDEDE;
    		padding:0 10px;
    		font-size:$s-font;
    		margin-top:15px;
    		padding-bottom:10px;
    		.list-cell{
    			border-bottom:1px solid #DEDEDE;
    			@include flexbox(space-between,center);
    			line-height: 60rpx;
    			height:60rpx;
    		}
    		.list-cell:first-child{
    			
    		}
    	}
    	.audio-text{
    		font-size: 34rpx;
    		line-height: 48rpx;
    		color: #414141;
    		text-align: center;
    		padding-top:100rpx;
    	}
    	.audio-dh{
    		@include flexbox(space-between,center);
    	}
		.upload-div{
			width:680rpx;
			height: 190rpx;
			border: 2rpx dashed #8B8B8B;
			border-radius: 15rpx;
			text-align: center;
		}
		.fileList{
			.file-item{
				@include flexbox(flex-start,center)
				background: rgba(254,249,246,1);
				border: 1px solid #FFA470;
				border-radius: 5rpx;
				font-size: 20rpx;
				color: #1E1E1E;
				padding:10rpx 20rpx;
				margin-top:26rpx;
				.name{
					@include textoverflow(1);
					flex:1
				}
				.icon-div{
					width:20px;
				}
			}
		}
    }
    .popup-bottom{
    	background: #fff;
    	margin-top:10px;
    	padding:16px;
    }
    .popup-bottom-fixed{
    	position: fixed;
    	width:100%;
    	padding:16px;
    	box-sizing: border-box;
    	bottom:0
    }
    
    

</style>
